<template>
  <div>
    <newPageHeader></newPageHeader>
    <!-- 主内容区域 -->
    <main class="main">
      <!-- 店铺主推区域 -->
      <section class="main-push">

        <div class="product-area">


          <div class="img-item">
            <img src="../../../../static/engineering5188/homPage/Recommended.png" />
          </div>


          <div class="lbtWidth" ref="lbtWidth">

            <div class="product-item-tuijian" v-for="(product, index) in products" :key="index"
              @click="ProductDetails(product)">
              <img :src="product.thumb" alt="">
              <div class="product-name-overlay">{{ product.title }}</div>
            </div>



          </div>
          <div class="jiantou" @click="scrollRight">
            <i class="el-icon-arrow-right" />
          </div>
        </div>

        <!-- 公司信息及联系方式区域 -->
        <div class="company-info">
          <div>
            <div class="company-details">

              <div>
                <img :src="shopInfo.image" alt="" class="company-logo">
              </div>


              <div>
                <div class="company-name">{{ shopInfo.company_title }}</div>

                <div class="companyDiv">
                  <img class="strengthIcon" v-if="shopInfo.if_strength"
                    src="../../../../static/engineering5188/homPage/strength.png" />
                  <div class="tiyanText">综合体验：</div>
                  <van-rate v-model="shopInfo.star" size="14" color="#ffd21e" disabled-color="#ffd21e" disabled />
                </div>

              </div>


            </div>


            <div class="company-address"  @click="openMap(shopInfo.reg_address)"><img class="weizhiIcon"
                src="../../../../static/engineering5188/homPage/orientation.png" alt="" /> 公司地址：{{
                  shopInfo.reg_address }}

              <span class="lookDt">查看地图</span>

            </div>

          </div>

          <div class="contact-buttons">
            <button class="call-button"> <img src="../../../../static/engineering5188/homPage/ShopTelephone.png" />
              一键拨号</button>
            <button class="chat-button"> <img src="../../../../static/engineering5188/homPage/message.png" />
              在线咨询</button>
          </div>


        </div>
      </section>
      <!-- 精选商品区域 -->
      <section class="selected-products">
        <div class="section-title">
          <span class="jingxuanText">精选商品</span>
          <span class="product-count">全部商品 <i class="el-icon-arrow-right"></i> </span>
        </div>
        <div class="product-list">
          <div class="product-item" v-for="(product, index) in products" :key="index" @click="ProductDetails(product)">
            <img :src="product.images.length > 0 ? product.images[0] : ''" alt="" class="product-img">
            <div class="product-price">
              <span>FOB
                <span style="color: #ED232A;">
                  ¥
                </span>
                <span class="priceNum">
                  {{ product.price }}
                </span>
              </span>
            </div>
            <div class="product-name">{{ product.title }}</div>
          </div>
        </div>
      </section>
    </main>
    <newPageFooter></newPageFooter>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import {openBaiduMap} from "../../../../util/map"
import newPageHeader from "../../../../components/page/engineering5188/new-page-header.vue";
import newPageFooter from "../../../../components/page/engineering5188/new-page-footer.vue";

export default {
  components: {
    newPageHeader,
    newPageFooter,
  },
  computed: {
    ...mapState([
      "userInfo",
    ]),
  },
  data() {
    return {
      shop_id: 0,
      shopInfo: {},
      if_strength: 1,

      company: {
        logo: 'https://example.com/company-logo.jpg',
        name: '广州东际国际海运有限公司',
        address: '滨海新区/新港街道'
      },
      imageSrc1: 'https://example.com/ship1.jpg', // 主推商品1图片地址
      imageSrc2: 'https://example.com/ship2.jpg', // 主推商品2图片地址
      imageSrc3: 'https://example.com/ship3.jpg', // 主推商品3图片地址
      imageSrc4: 'https://example.com/ship4.jpg', // 主推商品4图片地址
      rating: 4.5,
      products: [
        // 更多商品数据...
      ]
    }
  },
  created() {
    if (this.$route.query.shop_id) {
      this.shop_id = this.$route.query.shop_id
    } else {
      this.shop_id = this.userInfo.id
    }
    this.getData();
  },
  methods: {
    openMap(reg_address){
      openBaiduMap(reg_address);
    },
    getData() {
      this.$httpApi("/api/shopIndex", {
        shop_id: this.shop_id
      }, 'get').then(res => {
        this.shopInfo = res.data.shop;
        res.data.list.map(item => {
          item.images = item.thumb.split(',')
        })
        this.products = res.data.list;
        console.log(res)
      })
    },
    scrollRight() {
      const lbtWidth = this.$refs.lbtWidth;
      lbtWidth.scrollLeft += 200; // 每次滚动200像素，可根据需要调整
    },
    ProductDetails(item) {
      console.log('111111')
      this.$router.push({
        path: "/ProductDetails",
        query: {
          id: item.id
        }
      })
    },
  }
}


</script>

<style lang="less" scoped>
/* 商品展示区域样式 */
.product-area {
  display: flex;
  border-radius: 8px 8px 8px 8px;
  flex-grow: 1;
  position: relative;
}

.img-item {
  width: 130px;
  height: 210px;
}


.img-item img {
  width: 130px;
  height: 210px;
}

.lbtWidth {
  max-width: 964px;
  background: #FFFFFF;
  display: flex;
  padding: 24px 0 24px 8px;
  position: relative;
  flex-grow: 1;
  overflow-x: auto;
  /* 修改此处，当内容超出宽度时显示水平滚动条 */
  overflow-y: hidden;

  /* 垂直方向不显示滚动条 */
  /* 隐藏 WebKit 浏览器的滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }

  /* 隐藏 Firefox 浏览器的滚动条 */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.product-item-tuijian {
  // width: 222px;
  // height: 162px;
  // background-color: #666;
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}

.product-item-tuijian img {
  width: 248px;
  height: 162px;
}

.product-name-overlay {
  width: 100%;
  height: 36px;
  background: #000000;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.5;
  position: absolute;
  bottom: 0;
  line-height: 36px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  font-style: normal;
  text-transform: none;
}


.jiantou {
  width: 32px;
  height: 76px;
  background: #000000;
  border-radius: 8px 0px 0px 8px;
  opacity: 0.4;
  color: #FFFFFF;
  position: absolute;
  right: 8px;
  /* 固定在 lbtWidth 内部的右边 */
  top: 50%;
  transform: translateY(-50%);
  /* 垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  /* 确保箭头显示在内容之上 */

  i {
    font-size: 20px
  }
}


.lookDt {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #2F9CFB;
  text-align: left;
  font-style: normal;
  text-decoration-line: underline;
  text-transform: none;
  padding-left: 25px;
}

.company-address {
  margin-top: 15px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #858792;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;
}

.weizhiIcon {
  width: 12px;
  height: 16px;
}

.tiyanText {
  padding-left: 20px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #6D6D6D;

  font-style: normal;
  text-transform: none;
}

.strengthIcon {
  width: 78px;
  height: 20px;
}

.companyDiv {
  margin-top: 10px;
  display: flex;
}

.company-name {

  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #000000;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.contact-buttons {
  display: flex;

  gap: 15px;
}

.call-button img {
  width: 18px;
  height: 18px;
}

.call-button {
  min-width: 160px;
  height: 40px;
  background: #014BC4;
  border-radius: 4px 4px 4px 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  font-style: normal;
  text-transform: none;
}

.chat-button img {
  width: 18px;
  height: 18px;
}

.chat-button {
  min-width: 160px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #014BC4;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #014BC4;
  font-style: normal;
  text-transform: none;
}

/* 公司信息及联系方式区域 */
.company-info {
  width: 442px;
  padding: 24px 26px;
  // display: flex;
  // align-items: center;
  height: 210px;
  background-color: #fff;
  margin-left: 24px;

}

.company-logo {
  width: 78px;
  height: 48px;
  margin-right: 20px;
}

.company-details {
  display: flex;

}

/* 主内容区域样式 */
.main {
  width: 1530px;
  margin: auto;
  // padding: 20px;
}

.main-push {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 30px;
}

.main-push-label {}

.main-push-label img {
  width: 130px;
  height: 210px;
}

.main-push-images {
  width: 934px;
  display: flex;

}

.main-push-img {
  width: 222px;
  height: 162px;

}

// .company-info-right {
//   width: 410px;
//   height: 210px;
//   background-color: #fff;
//   padding: 10px;
// }
// .tag {
//   background-color: #28a745;
//   color: white;
//   padding: 2px 6px;
//   border-radius: 2px;
//   margin-right: 5px;
// }
// .address {
//   margin-top: 5px;
// }
// .contact-buttons {
//   margin-top: 10px;
//   display: flex;
//   gap: 10px;
// }
// .call-button,
// .chat-button {
//   padding: 8px 15px;
//   border: none;
//   border-radius: 3px;
//   cursor: pointer;
// }
// .call-button {
//   background-color: #007bff;
//   color: white;
// }
// .chat-button {
//   background-color: #17a2b8;
//   color: white;
// }

/* 精选商品区域样式 */
.selected-products {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 18px 30px;

}


.jingxuanText {

  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: #000000;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.product-count {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 20px;
}

.product-item {
  width: 349px;
  height: 354px;
  border: 1px solid #e0e0e0;
  cursor: pointer;

  /* text-align: center; */
}

.product-img {
  width: 100%;
  height: 231px;
  margin-bottom: 10px;
}

.priceNum {

  font-family: DIN Alternate, DIN Alternate;
  font-weight: bold;
  font-size: 24px;
  color: #ED232A;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.product-price {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  margin-bottom: 12px;
  padding-left: 16px;
}

.product-name {
  width: 297px;
  height: 22px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #000000;

  font-style: normal;
  text-transform: none;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 16px;
}
</style>